/*
 * @Author: 肖思汗 
 * @Date: 2025-06-25 09:26:35 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-09-05 15:35:20
 */


import { Close } from "@nutui/icons-react-taro";
import { Button, NavBar, Row, Space } from "@nutui/nutui-react-taro";
import { Image } from "@tarojs/components";
import clsx from "clsx";
import { chunk, get } from "lodash";
import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import MyEmpty from "src/components/MyEmpty/MyEmpty";
import MyScrollView from "src/components/MyScrollView/MyScrollView";
import utils from "src/utils/utils";
import { StickerData } from "types/type";
import designerRender from "../Designer/designerRender";
import styles from "./stickerModel.module.less";
import stickerModelStore from "./stickerModelStore";
import { observer } from "mobx-react-lite";
import MyPopup from "src/components/MyPopup/MyPopup";
import leftTopStore from "../LeftTop/leftTopStore";

interface Iprops {
    children?: ReactNode
}

// 贴纸弹窗
const StickerModel = observer((props: Iprops) => {

    const dom = useRef<HTMLDivElement | null>(null);
    const [groupData, setGroupData] = useState<Array<any>>([]);
    const [activeid, setActiveid] = useState<[number, number | undefined]>([0, 0]);
    const [stickers, setStickers] = useState<Array<StickerData>>([]);

    useEffect(() => { }, []);

    useEffect(() => autorun(() => {
        setGroupData(toJS(stickerModelStore.cascaderOptions));
        setStickers(toJS(stickerModelStore.stickers));
        setActiveid(stickerModelStore.activeid);
    }, { delay: 30 }), []);

    return (
        <MyPopup
            title="贴纸"
            hasMark={false}
            open={
                !leftTopStore.showColorPicker &&
                stickerModelStore.show
            }
            className={styles.stickerModel}
            onClose={() => {
                stickerModelStore.setShow(false);
            }}
        >
            <Space className={styles.scrollFilter}>
                {toJS(stickerModelStore.cascaderOptions).map((item) => {
                    return (
                        <Button
                            key={item.value}
                            fill={get(activeid, [0]) === item.value ? undefined : "none"}
                            type={get(activeid, [0]) === item.value ? "primary" : undefined}
                            onClick={() => {
                                const firstItemValue = get(item, ["children", 0, "value"]) as number;
                                stickerModelStore.setActiveid([item.value as number, firstItemValue]);
                            }}
                        >
                            {item.label}
                        </Button>
                    )
                })}
            </Space>

            <Space className={styles.scrollFilter}>
                {
                    //@ts-ignore
                    toJS(stickerModelStore.cascaderOptions).find((item) => item.value === get(activeid, [0]))?.children
                        .map((item) => (
                            <Button
                                key={item.value}
                                fill={get(activeid, [1]) === item.value ? undefined : "none"}
                                type={get(activeid, [1]) === item.value ? "primary" : undefined}
                                onClick={() => {
                                    stickerModelStore.setActiveid([activeid[0], item.value as number]);
                                }}
                            >
                                {item.label}
                            </Button>
                        ))}
            </Space>

            {
                stickers.length === 0 &&
                <MyEmpty
                    description="暂无素材"
                    style={{
                        height: "420rpx"
                    }}
                />
            }

            {/* 素材列表 */}
            {
                stickers.length > 0 &&
                <MyScrollView
                    className={styles.stickersList}
                    onScrollBottom={() => {
                        stickerModelStore.getNextPage();
                    }}
                >
                    {
                        chunk(stickers, 4).map((stickerArr: Array<StickerData>, i) => {
                            return (
                                <Row key={i} className={styles.stickersRow} >
                                    {
                                        stickerArr.map((sticker, ii) => {
                                            return (
                                                <Image
                                                    key={sticker.imageUrl}
                                                    className={styles.stickerImg}
                                                    src={utils.ossSuffix(sticker.imageUrl, 200)}
                                                    mode="aspectFit"
                                                    onClick={() => {
                                                        designerRender.addImg(sticker.imageUrl);
                                                        // stickerModelStore.setShow(false);
                                                    }}
                                                />
                                            );
                                        })
                                    }
                                </Row>
                            )
                        })
                    }
                </MyScrollView>
            }
        </MyPopup >
    );
});

export default StickerModel;